<!--
 * name: 用户分析
 * author: zyj
 * date: 2021.9.17
-->
<template>
    <div class="api-warp item-warp">
        <div class="item-title">
            <h2>用户分析</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_user.png">
            </a>
        </div>
        <div class="user-content">
            <div class="user-data">
                <div class="user-data-left">
                    <span>企业用户: {{ company.org }}%</span>
                    <span>个人用户: {{ personal.user }}%</span>
                </div>
                <!-- <div class="user-data-right"></div> -->
                <div class="user-item">
                <echarts-area :data="lineData" :orgData="lineOrgData" :dataTime="dataTime" :title="title"
                                v-if="lineData.lineY.length>0||lineOrgData.lineY.length>0"></echarts-area>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import EchartsArea from '@/components/Echarts/EchartsArea';
import {getUserData, getOrgData} from "@/api/apiList";

export default {
    name: "apiCount",
    components: {EchartsArea},
    data: () => ({
        userData: [],
        orgData: [],
        title: ['用户注册趋势', '企业认证趋势'],
        lineData: { // 折线图左边
            lineX: [],
            lineY: [],
            position: [30, 40, 30, 50],
            title: '用户注册趋势'
        },
        lineOrgData: { // 折线图右边
            lineX: [],
            lineY: [],
            position: [30, 40, 30, 50],
            title: '企业认证趋势'
        },
        company: {
            org: 0,
            name: '企业用户',
            color: '#00D98B'
        },
        personal: {
            user: 0,
            name: '个人用户',
            color: '#ECA961'
        },
        dataTime: [],
    }),
    methods: {
        /**
         * 用户分析数据
         */
        getUserData() {
            getUserData({}).then(res => {
                this.userData = res.data.data;
                this.userData.map( item => {
                    var a = [];
                    a.push(item.creatDate);
                    this.dataTime = a.concat(this.dataTime).sort();
                    this.lineData.lineY.push([item.creatDate, item.num]);
                });
            });
        },

        /**
         * 用户分析数据右侧数据
         */
        getOrgData() {
            getOrgData({}).then(res => {
                this.company.org = res.data.data.org;
                this.personal.user = res.data.data.user;
                this.orgData = res.data.dataLine;
                this.orgData.map(item => {
                    this.dataTime.push(item.dateTime);
                    this.dataTime = Array.from(new Set(this.dataTime))
                    this.lineOrgData.lineY.push([item.dateTime, item.countNum]);
                });
            });
        },
    },
    created() {
        this.getUserData();
        this.getOrgData();
    },
}
</script>

<style scoped type="text/less" lang="less">
.api-warp {
    position: relative;
    flex: 1;
    height: 27vh;
    background-image: url("../../assets/img/bg/bg_k02.png");
    background-size: 100% 100%;

    .user-content {
        width: 100%;
        //display: flex;
        .user-data {
            //display: flex;
            //justify-content: space-between;
            margin-bottom: 60px;

            .user-data-left {
                color: #2f74af;
                font-size: 14px;
                width: 70%;
                height: 50px;
                line-height: 50px;
                margin-left: 12px;

                span:nth-child(2) {
                    margin-left: 15px;
                }
            }

            //.user-data-right {
            //    color: #4EB2F2;
            //    font-size: 16px;
            //    span {
            //        margin-left: 15px;
            //    }
            //}
        }

        .user-item {
            position: absolute;
            right: -15px;
            top: 10px;
            width: 100%;
            height: 20vh;
            margin-top: 40px;

            .right-item {
                position: relative;
                z-index: 10;
                display: flex;
                width: 100%;
                height: 10vh;

                &:last-child {
                    height: 17vh;
                }

                &:first-child {
                    padding: 0 5%;
                }

                .pie {
                    position: relative;
                    z-index: 11;
                    top: -10px;
                    width: 50%;
                    height: 10vh;
                }
            }
        }
    }
}
</style>
